<template>
  <view class="paper">
    <view class="info">
      <view class="info_content">
        <view class="info_box">
          <text>{{ exam.gotScore }}</text>
        </view>
        <view class="info_text">作答成绩</view>
      </view>
      <view class="info_content">
        <view class="info_box">
          <text>{{ exam.examDuration }}'00''</text>
        </view>
        <view class="info_text">作答时长</view>
      </view>
      <view class="info_content">
        <view class="info_box">
          <text>{{ exam.scoringRate }}%</text>
        </view>
        <view class="info_text">得分率</view>
      </view>
    </view>
    <view class="tabs">
      <view
        class="tabs_content"
        :class="{
          active: activeName === '0',
        }"
        @click="handleChange('0')"
      >
        <text>全部題目</text>
      </view>
      <view
        class="tabs_content"
        :class="{
          active: activeName === '1',
        }"
        @click="handleChange('1')"
      >
        <text>做对的题</text>
      </view>
      <view
        class="tabs_content"
        :class="{
          active: activeName === '2',
        }"
        @click="handleChange('2')"
      >
        <text>做错的题</text>
      </view>
    </view>
    <view class="paper_content">
      <template v-if="listeningObject.listeningNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ listeningObject.listeningTitle }}</text>
            <text class="text2"
              >（共{{ listeningObject.listeningNum }}题；共{{
                listeningObject.listeningScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in listeningObject.listeningList"
            :key="index"
          >
            <template v-if="item.listeningType === '1'">
              <view class="question_tips">
                <view class="question_tips_text">
                  {{ item.description }}
                </view>
                <view class="question_tips_audio">
                  <audio :src="item.audio" controls></audio>
                </view>
              </view>
              <view
                class="subject_box"
                v-show="
                  activeName === '0' ||
                  (activeName === '1' && item.correctFlag) ||
                  (activeName === '2' && !item.correctFlag)
                "
              >
                <view class="question_title">
                  <view class="question_content">
                    <view
                      class="question_content_title"
                      v-if="item.content.indexOf('<img') === -1"
                    >
                      {{ item.questionNum }}.听录音，完成填空。
                    </view>
                    <view class="question_content_title" v-else>
                      {{ item.questionNum }}.
                    </view>
                    <view
                      class="question_content_box"
                      v-html="
                        handleReplaceAll(
                          handleRichText(item.content),
                          `<input type='text' data-type='1' data-index=${index} class='question_input' disabled/>`
                        )
                      "
                    ></view>
                  </view>
                </view>
                <view class="subject_img">
                  <image
                    v-if="item.correctFlag"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/zq.png"
                    mode="widthFix"
                  ></image>
                  <image
                    v-else
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cha.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
            </template>
            <template v-if="item.listeningType === '3'">
              <view class="question_tips">
                <view class="question_tips_text">
                  {{ item.description }}
                </view>
                <view class="question_tips_audio">
                  <audio :src="item.audio" controls></audio>
                </view>
              </view>
              <view
                class="subject_box"
                v-for="(element, i) in item.items"
                :key="i"
                v-show="
                  activeName === '0' ||
                  (activeName === '1' && element.correctFlag) ||
                  (activeName === '2' && !element.correctFlag)
                "
              >
                <template v-if="element.itemType === '1'">
                  <view class="question_title">
                    <view class="question_content">
                      <view
                        class="question_content_title"
                        v-if="item.content.indexOf('<img') === -1"
                      >
                        {{ item.questionNum }}.听录音，完成填空。
                      </view>
                      <view class="question_content_title" v-else>
                        {{ item.questionNum }}.
                      </view>
                      <view
                        class="question_content_box"
                        v-html="
                          handleReplaceAll(
                            handleRichText(item.content),
                            `<input type='text' data-type='1' data-index=${index}  data-i=${i} class='question_input' disabled />`
                          )
                        "
                      ></view>
                    </view>
                  </view>
                </template>
                <template v-else-if="element.itemType === '2'">
                  <view class="question_title">
                    <view class="question_title_content">
                      <text
                        >{{ element.questionNum }}.{{
                          element.content || "根据上述录音答题"
                        }}</text
                      >
                    </view>
                  </view>
                  <view class="question_options">
                    <u-radio-group
                      v-model="element.userAnswer"
                      :disabled="true"
                    >
                      <u-radio
                        v-for="(option, key) in element.optionsList"
                        :key="key"
                        :name="option.name"
                      >
                        <view class="question_options_content">
                          <text>{{ option.name }}.</text>
                          <text>{{ option.value }}</text>
                        </view>
                      </u-radio>
                    </u-radio-group>
                  </view>
                  <view class="question_answer">
                    <view class="question_answer_content">
                      <view class="question_answer_text">
                        <text>【答案】{{ element.answer }}</text>
                      </view>
                      <view
                        class="question_answer_text"
                        v-if="element.analysis"
                      >
                        <text>【解析】{{ element.analysis }}</text>
                      </view>
                    </view>
                  </view>
                </template>
                <template v-else-if="element.itemType === '3'">
                  <view class="question_title">
                    <view class="question_title_content">
                      <text
                        >{{ element.questionNum }}.{{
                          element.content || "根据上述录音答题"
                        }}</text
                      >
                    </view>
                  </view>
                  <view class="question_options">
                    <u-radio-group
                      v-model="element.userAnswer"
                      :disabled="true"
                    >
                      <u-radio
                        v-for="(option, key) in element.optionsList"
                        :key="key"
                        :name="option.name"
                      >
                        <view class="question_options_content">
                          <text>{{ option.name }}.</text>
                          <image :src="option.value" mode="widthFix"></image>
                        </view>
                      </u-radio>
                    </u-radio-group>
                  </view>
                  <view class="question_answer">
                    <view class="question_answer_content">
                      <view class="question_answer_text">
                        <text>【答案】{{ element.answer }}</text>
                      </view>
                      <view
                        class="question_answer_text"
                        v-if="element.analysis"
                      >
                        <text>【解析】{{ element.analysis }}</text>
                      </view>
                    </view>
                  </view>
                </template>
                <view class="subject_img">
                  <image
                    v-if="element.correctFlag"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/zq.png"
                    mode="widthFix"
                  ></image>
                  <image
                    v-else
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cha.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
            </template>
            <view class="subject_answer">
              <view class="subject_answer_content">
                <view class="subject_answer_text" v-if="item.testingPoints">
                  <text>【考点】{{ item.testingPoints }}</text>
                </view>
                <view class="subject_answer_text" v-if="item.analysis">
                  <text>【解析】{{ item.analysis }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="choiceObject.choiceNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ choiceObject.choiceTitle }}</text>
            <text class="text2"
              >（共{{ choiceObject.choiceNum }}题；共{{
                choiceObject.choiceScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in choiceObject.choiceList"
            :key="index"
            v-show="
              activeName === '0' ||
              (activeName === '1' && item.correctFlag) ||
              (activeName === '2' && !item.correctFlag)
            "
          >
            <template v-if="item.choiceType === '1'">
              <view class="question_title">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                  <text v-html="item.content"></text>
                </view>
              </view>
              <view class="question_options">
                <u-radio-group v-model="item.userAnswer" :disabled="true">
                  <u-radio
                    v-for="(option, i) in item.optionsList"
                    :key="i"
                    :name="option.name"
                  >
                    <view class="question_options_content">
                      <text>{{ option.name }}.</text>
                      <text>{{ option.value }}</text>
                    </view>
                  </u-radio>
                </u-radio-group>
              </view>
            </template>
            <template v-if="item.choiceType === '2'">
              <view class="question_title">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                  <text v-html="item.content"></text>
                  <image :src="item.image" mode="widthFix"></image>
                </view>
              </view>
              <view class="question_options">
                <u-radio-group v-model="item.userAnswer" :disabled="true">
                  <u-radio
                    v-for="(option, i) in item.optionsList"
                    :key="i"
                    :name="option.name"
                  >
                    <view class="question_options_content">
                      <text>{{ option.name }}.</text>
                      <text>{{ option.value }}</text>
                    </view>
                  </u-radio>
                </u-radio-group>
              </view>
            </template>
            <template v-if="item.choiceType === '3'">
              <view class="question_title">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                  <text v-html="item.content"></text>
                </view>
              </view>
              <view class="question_options">
                <u-radio-group v-model="item.userAnswer" :disabled="true">
                  <u-radio
                    v-for="(option, i) in item.optionsList"
                    :key="i"
                    :name="option.name"
                  >
                    <view class="question_options_content">
                      <text>{{ option.name }}.</text>
                      <image :src="option.value" mode="widthFix"></image>
                    </view>
                  </u-radio>
                </u-radio-group>
              </view>
            </template>
            <view class="subject_img">
              <image
                v-if="item.correctFlag"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/zq.png"
                mode="widthFix"
              ></image>
              <image
                v-else
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cha.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="question_answer">
              <view class="question_answer_content">
                <view class="question_answer_text">
                  <text>【答案】{{ item.answer }}</text>
                </view>
                <view class="question_answer_text" v-if="item.testingPoints">
                  <text>【考点】{{ item.testingPoints }}</text>
                </view>
                <view class="question_answer_text" v-if="item.analysis">
                  <text>【解析】{{ item.analysis }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="blankObject.blankNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ blankObject.blankTitle }}</text>
            <text class="text2"
              >（共{{ blankObject.blankNum }}题；共{{
                blankObject.blankScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in blankObject.blankList"
            :key="index"
            v-show="
              activeName === '0' ||
              (activeName === '1' && item.correctFlag) ||
              (activeName === '2' && !item.correctFlag)
            "
          >
            <view class="question_title">
              <template v-if="item.description">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                </view>
                <view
                  class="question_text"
                  v-html="
                    handleReplaceAll(
                      handleRichText(item.content),
                      `<input type='text' data-type='3' data-index=${index} class='question_input' disabled/>`
                    )
                  "
                ></view>
              </template>
              <template v-else>
                <template v-if="item.content.indexOf('<img') === -1">
                  <view class="question_title_content">
                    <text>{{ item.questionNum }}、</text>
                    <view
                      class="question_text"
                      v-html="
                        handleReplaceAll(
                          handleRichText(item.content),
                          `<input type='text' data-type='3' data-index=${index} class='question_input' disabled/>`
                        )
                      "
                    ></view>
                  </view>
                </template>
                <template v-else>
                  <view class="question_title_content">
                    <text>{{ item.questionNum }}、</text>
                    <text>根据图文填空</text>
                  </view>
                  <view
                    class="question_text"
                    v-html="
                      handleReplaceAll(
                        handleRichText(item.content),
                        `<input type='text' data-type='3' data-index=${index} class='question_input' disabled />`
                      )
                    "
                  ></view>
                </template>
              </template>
            </view>
            <view class="subject_img">
              <image
                v-if="item.correctFlag"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/zq.png"
                mode="widthFix"
              ></image>
              <image
                v-else
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cha.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="question_answer">
              <view class="question_answer_content">
                <view class="question_answer_text">
                  <text>【答案】{{ item.answer }}</text>
                </view>
                <view class="question_answer_text" v-if="item.testingPoints">
                  <text>【考点】{{ item.testingPoints }}</text>
                </view>
                <view class="question_answer_text" v-if="item.analysis">
                  <text>【解析】{{ item.analysis }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="judgeObject.judgeNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ judgeObject.judgeTitle }}</text>
            <text class="text2"
              >（共{{ judgeObject.judgeNum }}题；共{{
                judgeObject.judgeScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in judgeObject.judgeList"
            :key="index"
            v-show="
              activeName === '0' ||
              (activeName === '1' && item.correctFlag) ||
              (activeName === '2' && !item.correctFlag)
            "
          >
            <view class="question_title">
              <template v-if="item.description">
                <view class="question_title_content">
                  <text>{{ item.questionNum }}、</text>
                  <text>{{ item.description }}</text>
                </view>
                <view
                  class="question_text"
                  v-html="
                    handleReplaceAll(
                      handleRichText(item.content),
                      `<input type='text' data-type='4' data-index=${index} class='question_input' disabled />`
                    )
                  "
                ></view>
              </template>
              <template v-else>
                <template v-if="item.content.indexOf('<img') === -1">
                  <view class="question_title_content">
                    <text>{{ item.questionNum }}、</text>
                    <view
                      class="question_text"
                      v-html="
                        handleReplaceAll(
                          handleRichText(item.content),
                          `<input type='text' data-type='4' data-index=${index} class='question_input' disabled />`
                        )
                      "
                    ></view>
                  </view>
                </template>
                <template v-else>
                  <view class="question_title_content">
                    <text>{{ item.questionNum }}、</text>
                    <text>根据图文填判断对错，正确选T，错误选F</text>
                  </view>
                  <view
                    class="question_text"
                    v-html="
                      handleReplaceAll(
                        handleRichText(item.content),
                        `<input type='text' data-type='4' data-index=${index} class='question_input' disabled />`
                      )
                    "
                  ></view>
                </template>
              </template>
            </view>
            <view class="question_options">
              <u-radio-group v-model="item.userAnswer" :disabled="true">
                <u-radio name="T">
                  <view class="question_options_content">
                    <text>T</text>
                  </view>
                </u-radio>
                <u-radio name="F">
                  <view class="question_options_content">
                    <text>F</text>
                  </view>
                </u-radio>
              </u-radio-group>
            </view>
            <view class="subject_img">
              <image
                v-if="item.correctFlag"
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/zq.png"
                mode="widthFix"
              ></image>
              <image
                v-else
                src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cha.png"
                mode="widthFix"
              ></image>
            </view>
            <view class="question_answer">
              <view class="question_answer_content">
                <view class="question_answer_text">
                  <text>【答案】{{ item.answer }}</text>
                </view>
                <view class="question_answer_text" v-if="item.testingPoints">
                  <text>【考点】{{ item.testingPoints }}</text>
                </view>
                <view class="question_answer_text" v-if="item.analysis">
                  <text>【解析】{{ item.analysis }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="clozeObject.clozeNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ clozeObject.clozeTitle }}</text>
            <text class="text2"
              >（共{{ clozeObject.clozeNum }}题；共{{
                clozeObject.clozeScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in clozeObject.clozeList"
            :key="index"
          >
            <view class="question_title">
              <view class="question_title_content">
                <text
                  >({{ (index + 1) | numberFilter }}).{{
                    item.description
                  }}</text
                >
              </view>
              <view
                class="question_text"
                v-html="
                  handleReplaceAll(
                    handleRichText(item.content),
                    `<input type='text' data-type='5' data-index=${index} class='question_input' disabled/>`
                  )
                "
              ></view>
            </view>
            <view
              class="question_options"
              v-for="(element, i) in item.items"
              :key="i"
              v-show="
                activeName === '0' ||
                (activeName === '1' && element.correctFlag) ||
                (activeName === '2' && !element.correctFlag)
              "
            >
              <view class="question_options_number">
                {{ element.questionNum }}
              </view>
              <u-radio-group
                v-model="element.userAnswer"
                :disabled="true"
                width="25%"
              >
                <u-radio
                  v-for="(option, key) in element.optionsList"
                  :key="key"
                  :name="option.name"
                >
                  <view class="question_options_content">
                    <text>{{ option.name }}.</text>
                    <text>{{ option.value }}</text>
                  </view>
                </u-radio>
              </u-radio-group>
              <view class="subject_img">
                <image
                  v-if="element.correctFlag"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/zq.png"
                  mode="widthFix"
                ></image>
                <image
                  v-else
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cha.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>
            <view class="subject_answer">
              <view class="subject_answer_content">
                <view class="subject_answer_text">
                  <text>【答案】{{ item.answer }}</text>
                </view>
                <view class="subject_answer_text" v-if="item.testingPoints">
                  <text>【考点】{{ item.testingPoints }}</text>
                </view>
                <view class="subject_answer_text" v-if="item.analysis">
                  <text>【解析】{{ item.analysis }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="taskReadingObject.taskReadingNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ taskReadingObject.taskReadingTitle }}</text>
            <text class="text2"
              >（共{{ taskReadingObject.taskReadingNum }}题；共{{
                taskReadingObject.taskReadingScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in taskReadingObject.taskReadingList"
            :key="index"
          >
            <view class="question_title">
              <view class="question_title_content">
                <text
                  >({{ (index + 1) | numberFilter }}).{{
                    item.description
                  }}</text
                >
              </view>
              <view
                class="question_text"
                v-html="
                  handleReplaceAll(
                    handleRichText(item.content),
                    `<input type='text' data-type='6' data-index=${index} class='question_input' disabled/>`
                  )
                "
              ></view>
            </view>
            <template v-if="item.items.length > 0">
              <view
                class="subject_box"
                v-show="
                  activeName === '0' ||
                  (activeName === '1' && element.correctFlag) ||
                  (activeName === '2' && !element.correctFlag)
                "
                v-for="(element, i) in item.items"
                :key="i"
              >
                <view class="question_title">
                  <view class="question_title_content">
                    <text>{{ element.questionNum }}.{{ element.content }}</text>
                  </view>
                </view>
                <view class="question_options">
                  <u-input
                    v-model="element.userAnswer"
                    type="textarea"
                    :border="true"
                    :auto-height="true"
                    placeholder="请在此输入答案"
                    disabled
                  />
                </view>
                <view class="question_answer">
                  <view class="question_answer_content">
                    <view class="question_answer_text">
                      <text>【答案】{{ element.answer }}</text>
                    </view>
                    <view class="question_answer_text" v-if="element.analysis">
                      <text>【解析】{{ element.analysis }}</text>
                    </view>
                  </view>
                </view>
                <view class="subject_img">
                  <image
                    v-if="element.correctFlag"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/zq.png"
                    mode="widthFix"
                  ></image>
                  <image
                    v-else
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cha.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
            </template>
            <template v-else>
              <view
                class="subject_box"
                v-show="
                  activeName === '0' ||
                  (activeName === '1' && item.correctFlag) ||
                  (activeName === '2' && !item.correctFlag)
                "
              >
                <view class="question_title">
                  <view class="question_title_content">
                    <text
                      >{{ item.questionNum }}.将短文答案填入下列答题框内</text
                    >
                  </view>
                </view>
                <view class="question_options">
                  <u-input
                    v-model="item.userAnswer"
                    type="textarea"
                    :border="true"
                    :auto-height="true"
                    placeholder="请在此输入答案,多个答案请用|隔开"
                    disabled
                  />
                </view>
                <view class="question_answer">
                  <view class="question_answer_content">
                    <view class="question_answer_text">
                      <text>【答案】{{ item.answer }}</text>
                    </view>
                    <view class="question_answer_text" v-if="item.analysis">
                      <text>【解析】{{ item.analysis }}</text>
                    </view>
                  </view>
                </view>
                <view class="subject_img">
                  <image
                    v-if="item.correctFlag"
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/zq.png"
                    mode="widthFix"
                  ></image>
                  <image
                    v-else
                    src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cha.png"
                    mode="widthFix"
                  ></image>
                </view>
              </view>
            </template>
            <view class="subject_answer">
              <view class="subject_answer_content">
                <view class="subject_answer_text" v-if="item.testingPoints">
                  <text>【考点】{{ item.testingPoints }}</text>
                </view>
                <view class="subject_answer_text" v-if="item.analysis">
                  <text>【解析】{{ item.analysis }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="readingComprehensionObject.readingComprehensionNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{
              readingComprehensionObject.readingComprehensionTitle
            }}</text>
            <text class="text2"
              >（共{{
                readingComprehensionObject.readingComprehensionNum
              }}题；共{{
                readingComprehensionObject.readingComprehensionScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(
              item, index
            ) in readingComprehensionObject.readingComprehensionList"
            :key="index"
          >
            <view class="question_title">
              <view class="question_title_content">
                <text
                  >({{ (index + 1) | numberFilter }}).{{
                    item.description
                  }}</text
                >
              </view>
              <view
                class="question_text"
                v-html="
                  handleReplaceAll(
                    handleRichText(item.content),
                    `<input type='text' data-type='7' data-index=${index} class='question_input' disabled/>`
                  )
                "
              ></view>
            </view>
            <view
              class="subject_box"
              v-for="(element, i) in item.items"
              :key="i"
              v-show="
                activeName === '0' ||
                (activeName === '1' && element.correctFlag) ||
                (activeName === '2' && !element.correctFlag)
              "
            >
              <view class="question_title">
                <view class="question_title_content">
                  <text>{{ element.questionNum }}.{{ element.content }}</text>
                </view>
              </view>
              <view class="question_options">
                <u-radio-group
                  v-model="element.userAnswer"
                  :disabled="true"
                  width="100%"
                >
                  <u-radio
                    v-for="(option, key) in element.optionsList"
                    :key="key"
                    :name="option.name"
                  >
                    <view class="question_options_content">
                      <text>{{ option.name }}.</text>
                      <text>{{ option.value }}</text>
                    </view>
                  </u-radio>
                </u-radio-group>
              </view>
              <view class="question_answer">
                <view class="question_answer_content">
                  <view class="question_answer_text">
                    <text>【答案】{{ element.answer }}</text>
                  </view>
                  <view class="question_answer_text" v-if="element.analysis">
                    <text>【解析】{{ element.analysis }}</text>
                  </view>
                </view>
              </view>
              <view class="subject_img">
                <image
                  v-if="element.correctFlag"
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/zq.png"
                  mode="widthFix"
                ></image>
                <image
                  v-else
                  src="https://hengxiao-resource.oss-cn-hangzhou.aliyuncs.com/web/resources/images/hengxiao/img/cha.png"
                  mode="widthFix"
                ></image>
              </view>
            </view>
            <view class="subject_answer">
              <view class="subject_answer_content">
                <view class="subject_answer_text" v-if="item.testingPoints">
                  <text>【考点】{{ item.testingPoints }}</text>
                </view>
                <view class="subject_answer_text" v-if="item.analysis">
                  <text>【解析】{{ item.analysis }}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </template>
      <template v-if="compositionObject.compositionNum > 0">
        <view class="subject">
          <view class="subject_title">
            <text class="text1">{{ compositionObject.compositionTitle }}</text>
            <text class="text2"
              >（共{{ compositionObject.compositionNum }}题；共{{
                compositionObject.compositionScore
              }}分）</text
            >
          </view>
          <view
            class="subject_content"
            v-for="(item, index) in compositionObject.compositionList"
            :key="index"
          >
            <view class="question_title">
              <view class="question_title_content">
                <text>{{ item.questionNum }}、</text>
                <text>{{ item.description }}</text>
              </view>
              <view
                class="question_text"
                v-html="
                  handleReplaceAll(
                    handleRichText(item.content),
                    `<input type='text' data-type='8' data-index=${index} class='question_input' disabled/>`
                  )
                "
              ></view>
            </view>
            <view class="question_textarea">
              <view class="question_textarea_content">
                <u-input
                  v-model="item.userAnswer"
                  type="textarea"
                  :border="true"
                  :auto-height="true"
                  disabled
                />
              </view>
            </view>
          </view>
        </view>
      </template>
    </view>
    <view class="paper_number">
      <template v-if="listeningObject.listeningNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ listeningObject.listeningTitle }}
          </view>
          <view class="paper_number_list">
            <template v-for="(item, index) in listeningObject.listeningList">
              <template v-if="item.listeningType === '1'">
                <view
                  class="paper_number_item"
                  :class="{
                    correct: item.correctFlag,
                    error: !item.correctFlag,
                  }"
                  v-show="
                    activeName === '0' ||
                    (activeName === '1' && item.correctFlag) ||
                    (activeName === '2' && !item.correctFlag)
                  "
                  :key="index"
                >
                  <text>{{ item.questionNum }}</text>
                </view>
              </template>
              <template v-if="item.listeningType === '3'">
                <view
                  class="paper_number_item"
                  :class="{
                    correct: element.correctFlag,
                    error: !element.correctFlag,
                  }"
                  v-show="
                    activeName === '0' ||
                    (activeName === '1' && element.correctFlag) ||
                    (activeName === '2' && !element.correctFlag)
                  "
                  v-for="(element, i) in item.items"
                  :key="item.id + i"
                >
                  <text>{{ element.questionNum }}</text>
                </view>
              </template>
            </template>
          </view>
        </view>
      </template>
      <template v-if="choiceObject.choiceNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ choiceObject.choiceTitle }}
          </view>
          <view class="paper_number_list">
            <view
              class="paper_number_item"
              :class="{
                correct: item.correctFlag,
                error: !item.correctFlag,
              }"
              v-show="
                activeName === '0' ||
                (activeName === '1' && item.correctFlag) ||
                (activeName === '2' && !item.correctFlag)
              "
              v-for="(item, index) in choiceObject.choiceList"
              :key="index"
            >
              <text>{{ item.questionNum }}</text>
            </view>
          </view>
        </view>
      </template>
      <template v-if="blankObject.blankNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ blankObject.blankTitle }}
          </view>
          <view class="paper_number_list">
            <view
              class="paper_number_item"
              :class="{
                correct: item.correctFlag,
                error: !item.correctFlag,
              }"
              v-show="
                activeName === '0' ||
                (activeName === '1' && item.correctFlag) ||
                (activeName === '2' && !item.correctFlag)
              "
              v-for="(item, index) in blankObject.blankList"
              :key="index"
            >
              <text>{{ item.questionNum }}</text>
            </view>
          </view>
        </view>
      </template>
      <template v-if="judgeObject.judgeNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ judgeObject.judgeTitle }}
          </view>
          <view class="paper_number_list">
            <view
              class="paper_number_item"
              :class="{
                correct: item.correctFlag,
                error: !item.correctFlag,
              }"
              v-show="
                activeName === '0' ||
                (activeName === '1' && item.correctFlag) ||
                (activeName === '2' && !item.correctFlag)
              "
              v-for="(item, index) in judgeObject.judgeList"
              :key="index"
            >
              <text>{{ item.questionNum }}</text>
            </view>
          </view>
        </view>
      </template>
      <template v-if="clozeObject.clozeNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ clozeObject.clozeTitle }}
          </view>
          <view class="paper_number_list">
            <template v-for="item in clozeObject.clozeList">
              <view
                class="paper_number_item"
                :class="{
                  correct: element.correctFlag,
                  error: !element.correctFlag,
                }"
                v-show="
                  activeName === '0' ||
                  (activeName === '1' && element.correctFlag) ||
                  (activeName === '2' && !element.correctFlag)
                "
                v-for="(element, i) in item.items"
                :key="item.id + i"
              >
                <text>{{ element.questionNum }}</text>
              </view>
            </template>
          </view>
        </view>
      </template>
      <template v-if="taskReadingObject.taskReadingNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ taskReadingObject.taskReadingTitle }}
          </view>
          <view class="paper_number_list">
            <template
              v-for="(item, index) in taskReadingObject.taskReadingList"
            >
              <template v-if="item.items.length > 0">
                <view
                  class="paper_number_item"
                  :class="{
                    correct: element.correctFlag,
                    error: !element.correctFlag,
                  }"
                  v-show="
                    activeName === '0' ||
                    (activeName === '1' && element.correctFlag) ||
                    (activeName === '2' && !element.correctFlag)
                  "
                  v-for="(element, i) in item.items"
                  :key="item.id + i"
                >
                  <text>{{ element.questionNum }}</text>
                </view>
              </template>
              <template v-else>
                <view
                  class="paper_number_item"
                  :class="{
                    correct: item.correctFlag,
                    error: !item.correctFlag,
                  }"
                  v-show="
                    activeName === '0' ||
                    (activeName === '1' && item.correctFlag) ||
                    (activeName === '2' && !item.correctFlag)
                  "
                  :key="index"
                >
                  <text>{{ item.questionNum }}</text>
                </view>
              </template>
            </template>
          </view>
        </view>
      </template>
      <template v-if="readingComprehensionObject.readingComprehensionNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ readingComprehensionObject.readingComprehensionTitle }}
          </view>
          <view class="paper_number_list">
            <template
              v-for="item in readingComprehensionObject.readingComprehensionList"
            >
              <view
                class="paper_number_item"
                :class="{
                  correct: element.correctFlag,
                  error: !element.correctFlag,
                }"
                v-show="
                  activeName === '0' ||
                  (activeName === '1' && element.correctFlag) ||
                  (activeName === '2' && !element.correctFlag)
                "
                v-for="(element, i) in item.items"
                :key="item.id + i"
              >
                <text>{{ element.questionNum }}</text>
              </view>
            </template>
          </view>
        </view>
      </template>
      <template v-if="compositionObject.compositionNum > 0">
        <view class="paper_number_content">
          <view class="paper_number_title">
            {{ compositionObject.compositionTitle }}
          </view>
          <view class="paper_number_list">
            <view
              class="paper_number_item"
              :class="{
                active: item.userAnswer,
              }"
              v-for="(item, index) in compositionObject.compositionList"
              :key="index"
            >
              <text>{{ item.questionNum }}</text>
            </view>
          </view>
        </view>
      </template>
    </view>
  </view>
</template>
<script>
export default {
  name: "Paper-Record",
  props: {
    paper: {
      type: Object,
      default: () => {},
    },
    exam: {
      type: Object,
      default: () => {},
    },
  },
  filters: {
    numberFilter(number) {
      const numberMap = {
        1: "一",
        2: "二",
        3: "三",
        4: "四",
        5: "五",
        6: "六",
        7: "七",
        8: "八",
        9: "九",
        10: "十",
      };
      return numberMap[number];
    },
  },
  created() {
    this.init();
  },
  data() {
    return {
      listeningObject: {},
      choiceObject: {},
      blankObject: {},
      judgeObject: {},
      clozeObject: {},
      taskReadingObject: {},
      readingComprehensionObject: {},
      compositionObject: {},
      activeName: "0",
    };
  },
  methods: {
    init() {
      let paper = this.paper;
      this.listeningObject = {
        listeningTitle: paper.listeningTitle,
        listeningScore: paper.listeningScore,
        listeningNum: paper.listeningNum,
        listeningUnitScore: paper.listeningUnitScore,
        listeningList: paper.listeningList,
      };
      this.handleListening();
      this.choiceObject = {
        choiceTitle: paper.choiceTitle,
        choiceScore: paper.choiceScore,
        choiceNum: paper.choiceNum,
        choiceUnitScore: paper.choiceUnitScore,
        choiceList: paper.choiceList,
      };
      this.handleChoice();
      this.blankObject = {
        blankTitle: paper.blankTitle,
        blankScore: paper.blankScore,
        blankNum: paper.blankNum,
        blankUnitScore: paper.blankUnitScore,
        blankList: paper.blankList,
      };
      this.judgeObject = {
        judgeTitle: paper.judgeTitle,
        judgeScore: paper.judgeScore,
        judgeNum: paper.judgementNum,
        judgeUnitScore: paper.judgeUnitScore,
        judgeList: paper.judgeList,
      };
      this.clozeObject = {
        clozeTitle: paper.clozeTitle,
        clozeScore: paper.clozeScore,
        clozeNum: paper.clozeNum,
        clozeUnitScore: paper.clozeUnitScore,
        clozeList: paper.clozeList,
      };
      this.handleCloze();
      this.taskReadingObject = {
        taskReadingTitle: paper.taskReadingTitle,
        taskReadingScore: paper.taskReadingScore,
        taskReadingNum: paper.taskReadingNum,
        taskReadingUnitScore: paper.taskReadingUnitScore,
        taskReadingList: paper.taskReadingList,
      };
      this.readingComprehensionObject = {
        readingComprehensionTitle: paper.readingComprehensionTitle,
        readingComprehensionScore: paper.readingComprehensionScore,
        readingComprehensionNum: paper.readingComprehensionNum,
        readingComprehensionUnitScore: paper.readingComprehensionUnitScore,
        readingComprehensionList: paper.readingComprehensionList,
      };
      this.handleReadingComprehension();
      this.compositionObject = {
        compositionTitle: paper.compositionTitle,
        compositionScore: paper.compositionScore,
        compositionNum: paper.compositionNum,
        compositionUnitScore: paper.compositionUnitScore,
        compositionList: paper.compositionList,
      };
    },
    handleListening() {
      let questionList = this.listeningObject.listeningList;
      questionList.forEach((item) => {
        item.items.forEach((element) => {
          let optionsList = [];
          if (element.optionA) {
            optionsList.push({
              name: "A",
              value: element.optionA,
            });
          }
          if (element.optionB) {
            optionsList.push({
              name: "B",
              value: element.optionB,
            });
          }
          if (element.optionC) {
            optionsList.push({
              name: "C",
              value: element.optionC,
            });
          }
          if (element.optionD) {
            optionsList.push({
              name: "D",
              value: element.optionD,
            });
          }
          if (element.optionE) {
            optionsList.push({
              name: "E",
              value: element.optionE,
            });
          }
          this.$set(element, "optionsList", optionsList);
        });
      });
    },
    handleChoice() {
      let questionList = this.choiceObject.choiceList;
      questionList.forEach((item) => {
        let optionsList = [];
        if (item.optionA) {
          optionsList.push({
            name: "A",
            value: item.optionA,
          });
        }
        if (item.optionB) {
          optionsList.push({
            name: "B",
            value: item.optionB,
          });
        }
        if (item.optionC) {
          optionsList.push({
            name: "C",
            value: item.optionC,
          });
        }
        if (item.optionD) {
          optionsList.push({
            name: "D",
            value: item.optionD,
          });
        }
        if (item.optionE) {
          optionsList.push({
            name: "E",
            value: item.optionE,
          });
        }
        this.$set(item, "optionsList", optionsList);
      });
    },
    handleCloze() {
      let questionList = this.clozeObject.clozeList;
      questionList.forEach((item) => {
        item.items.forEach((element) => {
          let optionsList = [];
          if (element.optionA) {
            optionsList.push({
              name: "A",
              value: element.optionA,
            });
          }
          if (element.optionB) {
            optionsList.push({
              name: "B",
              value: element.optionB,
            });
          }
          if (element.optionC) {
            optionsList.push({
              name: "C",
              value: element.optionC,
            });
          }
          if (element.optionD) {
            optionsList.push({
              name: "D",
              value: element.optionD,
            });
          }
          this.$set(element, "optionsList", optionsList);
        });
      });
    },
    handleReadingComprehension() {
      let questionList =
        this.readingComprehensionObject.readingComprehensionList;
      questionList.forEach((item) => {
        item.items.forEach((element) => {
          let optionsList = [];
          if (element.optionA) {
            optionsList.push({
              name: "A",
              value: element.optionA,
            });
          }
          if (element.optionB) {
            optionsList.push({
              name: "B",
              value: element.optionB,
            });
          }
          if (element.optionC) {
            optionsList.push({
              name: "C",
              value: element.optionC,
            });
          }
          if (element.optionD) {
            optionsList.push({
              name: "D",
              value: element.optionD,
            });
          }
          this.$set(element, "optionsList", optionsList);
        });
      });
    },
    handleRichText(str) {
      str = str.replace(/\s+style="[^"]*"/g, ""); //去除style样式
      str = str.replace(/<\/?text[^>]*>/gi, "");
      str = str.replace(/<\/?font[^>]*>/gi, "");
      str = str.replace(/[ | ]*\n/g, "\n");
      str = str.replace(/\n[\s| | ]*\r/g, "\n");
      str = str.replace(/&nbsp;/gi, ""); //去除&nbsp;
      return str;
    },
    handleReplaceAll(content, html) {
      return this.replaceAll(content, /_{2,}/, html);
    },
    /** 全局替换*/
    replaceAll(str, regExp, replaceStr) {
      return str.replace(new RegExp(regExp, "gm"), replaceStr);
    },
    handleChange(index) {
      if (index === this.activeName) return;
      this.activeName = index;
    },
  },
};
</script>
<style scoped lang="scss">
@import "./PaperRecord";
</style>
